<template>
  <div>
   <el-card>
    <el-row>
      <el-button type="danger" @click="add">新增模板</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%" border>
    <el-table-column  label="模板类型" width="180" prop="templateType" :formatter="formatterTemplateType"> </el-table-column>
    <el-table-column  label="运输类型" width="180" prop="transportType" :formatter="formatterTransport"> </el-table-column>
    <el-table-column  label="关联城市" prop="associatedCityList" :formatter="formatRole"> </el-table-column>
    <el-table-column  label="首重" prop="firstWeight"> </el-table-column>
    <el-table-column label="续重" prop="continuousWeight"></el-table-column>
    <el-table-column label="轻抛系数" prop="lightThrowingCoefficient"> </el-table-column>
    <el-table-column  label="操作" width="120">
      <template #default="{row}">
         <el-link :underline="false"  type="primary"  @click="edit">编辑</el-link>
         <el-divider direction="vertical"></el-divider>
          <el-link :underline="false" type="danger" @click="del(row.id)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
   </el-card>
   <!-- 编辑的弹框 -->
   <el-dialog
  title="编辑模板"
  :visible.sync="dialogVisible"
  width="40%">
<!--  -->
<el-form  label-width="80px" ref="formRef" :rules="rules"   :model="{roleFormData}">
  <el-form-item label="模板类型" style="width:800px" prop="templateType">
     <el-select v-model="roleFormData.templateType" >
            <el-option
              v-for="item in Freightmanagement.templateType"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
  </el-form-item>
  <el-form-item label="运输类型" prop="transportType">
     <el-select v-model="roleFormData.transportType" >
            <el-option
              v-for="item in Freightmanagement.shippingType"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
  </el-form-item>
  <el-form-item label="关联形式" prop="associatedCityList">
    <span>全国</span>
  </el-form-item>
   <el-form-item label="首重价格" prop="firstWeight">
    <el-input v-model="roleFormData.firstWeight"></el-input>
  </el-form-item>
   <el-form-item label="续重价格" prop="continuousWeight">
    <el-input v-model="roleFormData.continuousWeight"></el-input>
  </el-form-item>
   <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
    <el-input v-model="roleFormData.lightThrowingCoefficient"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Freightmanagement from '@/api/constant/freightmanagement'
import { delExpensesApi, getExpensesApi } from '@/api/freightmanagement'
// const formatRole = {
//   1: '同城寄',
//   2: '京津冀',
//   3: '江浙沪',
//   4: '川渝',
//   5: '黑吉辽'
// }
export default {
  name: 'Freight-management',
  data () {
    return {
      Freightmanagement,
      tableData: [],
      roleFormData: {},
      dialogVisible: false,
      rules: {
        templateType: [
          {
            required: true, message: '请选择模板类型', trigger: 'blur'
          }
        ],
        transportType: [
          {
            required: true, message: '请选择运输类型', trigger: 'blur'
          }
        ],
        associatedCityList: [
          {
            required: true, message: '关联城市', trigger: 'blur'
          }
        ],
        firstWeight: [
          {
            required: true, message: '首重价格不能为空', trigger: 'blur'
          }
        ],
        continuousWeight: [
          {
            required: true, message: '续重价格不能为空', trigger: 'blur'
          }
        ],
        lightThrowingCoefficient: [
          {
            required: true, message: '轻抛系数不能为空', trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 列表信息获取
    async getList () {
      const res = await getExpensesApi()
      // console.log(res)
      this.tableData = res.data
    },
    // 关联城市转换
    formatRole (row, column) {
      // console.log(row)
      // console.log(column)
      // return row.associatedCityList[0] === '5' ? '黑吉辽' : row.associatedCityList[0] === '4' ? '川渝' : '川渝'
      if (row.associatedCityList[0] === '1') {
        return '同城寄'
      } else if (row.associatedCityList[0] === '2') {
        return '京津冀'
      } else if (row.associatedCityList[0] === '3') {
        return '江浙沪'
      } else if (row.associatedCityList[0] === '4') {
        return '川渝'
      } else if (row.associatedCityList[0] === '5') {
        return '黑吉辽'
      }
    },
    // 模板类型转换
    formatterTemplateType (row) {
      // console.log(row)
      if (row.templateType === 1) {
        return '同城寄'
      } else if (row.templateType === 2) {
        return '省内寄'
      } else if (row.templateType === 3) {
        return '经济区互寄'
      } else if (row.templateType === 4) {
        return '跨省'
      }
    },
    // 运输类型转换
    formatterTransport (row) {
      // console.log(row)
      if (row.transportType === 1) {
        return '普快'
      } else if (row.transportType === 2) {
        return '特快'
      }
    },
    async  del (id) {
      // console.log(id)
      // 给提示
      await this.$confirm('是否确认删除')
      // 调接口
      await delExpensesApi(id)
      // 删除成功给提示
      this.$message.success('抱歉，演示系统，不允许修改')
      // 重新获取最新列表
      this.getList()
    },
    // 编辑
    async  edit () {
      this.dialogVisible = true
      // await this.$refs.formRef.validate()
      const res = await getExpensesApi()
      console.log(res)
      this.roleFormData = res.data
      console.log(this.roleFormData)
    },
    add () {
      this.dialogVisible = true
    }
  }
}
</script>

<style>

</style>
